<template>
	<view>
		<uv-popup ref='popup' mode="center" :closeOnClickOverlay="false" :safeAreaInsetBottom="false" round="8px"
			overlayOpacity="0.8">
			<view class="flex-column" style="width: calc(100vw - 32px); background-color: white;">
				<view class="flex-row flex-between">
					<image :src="typeIcon()" style="width: 48px; height: 48px; margin-top: 20px; margin-left: 16px;"></image>
					<view v-if="showClose" class="popup-close flex-row-center" @click="close">
						<image src="../../static/close.png" style="width: 24px; height: 24px;"></image>
					</view>
				</view>
				<view class="flex-column" style="margin: 24px 16px;">
					<text class="font-weight-regular font-18" style="color: #000000;">{{ title }}</text>
					<text class="font-weight-regular font-14" style="margin-top: 5px; color: #313C56;">{{ msg }}</text>
				</view>
				<view class="popup-btn flex-row-center" :style="{ backgroundColor: confirmBgColor, color: confirmColor, marginBottom: showCancel ? '' : '12px'}"
					@click="confirm">
					{{ btnTitle }}
				</view>
				<view v-if="showCancel" class="popup-btn popup-cancel flex-row-center" @click="close">
					取消
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		name: "popup",
		props: {
			title: {
				type: String,
				default: '提示'
			},
			msg: {
				type: String,
				default: 'msg...'
			},
			// 按钮文本， 取消按钮上面的那个按钮
			btnTitle: {
				type: String,
				default: '确定'
			},
			confirmBgColor: {
				type: String,
				default: '#EB7520'
			},
			confirmColor: {
				type: String,
				default: '#FFFFFF'
			},
			/**
			 * 判断显示在左上角的图标
			 * success = 绿色的勾勾
			 * warning = 红色感叹号
			 */
			type: {
				type: String,
				default: 'success'
			},
			// 是否显示取消按钮
			showCancel: {
				type: Boolean,
				default: true
			},
			// 是否显示右上角关闭按钮
			showClose: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {

			};
		},
		methods: {
			typeIcon() {
				let iconName = ''
				if (this.type == 'success') {
					iconName = 'popup-success.png'
				} else if (this.type == 'warning') {
					iconName = 'popup-warning.png'
				}
				return `../../static/${iconName}`
			},
			confirm() {
				this.$emit('confirm')
				this.close()
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	.popup-btn {
		margin-left: 16px;
		margin-right: 16px;
		height: 44px;
		border-radius: 22px;
		font-size: 16px;
		font-weight: 400;
	}

	.popup-cancel {
		color: #313C56;
		margin-top: 12px;
		margin-bottom: 12px;
		border: 1px solid #D4D7DB;
	}

	.popup-close {
		margin-top: 12px;
		margin-right: 12px;
		height: 44px;
		width: 44px;
	}
</style>